import { useEffect, useState, useImperativeHandle, forwardRef } from 'react';
import { Modal } from 'antd';
import styles from './index.less';
import { warnYellow } from '@/assets';

function PriceValidationModal({ priceValidationList }, ref) {
  useImperativeHandle(ref, () => ({
    initHandle,
  }));

  const [showModal, setShowModal] = useState(false);

  const initHandle = () => {
    setShowModal(true);
  };

  return (
    <Modal
      className={styles.priceValidModal}
      centered={true}
      title={
        <div className={styles.modalTitle}>
          <img src={warnYellow} />
          <span className={styles.text}>校验错误提示</span>
        </div>
      }
      visible={showModal}
      footer={null}
      onCancel={() => {
        setShowModal(false);
      }}
    >
      {priceValidationList?.buy?.length ? (
        <div className={styles.contentItem}>
          时点 {priceValidationList.buy.join('、')}，买入方向，段二价高于段一价
        </div>
      ) : (
        ''
      )}
      {priceValidationList?.sell?.length ? (
        <div className={styles.contentItem}>
          时点 {priceValidationList.sell.join('、')}，卖出方向，段二价低于段一价
        </div>
      ) : (
        ''
      )}
    </Modal>
  );
}

export default forwardRef(PriceValidationModal);
